<template>
  <div>
    <headers class="head"></headers>
    <div class="navigation">
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        text-color="#fff"
        background-color="#2b2b2b"
        active-text-color="#ffffff"
      >
        <div class="logo">
          <img src="../assets/home/logo2.png" @click="sy" />
        </div>
        <el-submenu index="2" class="el-menu-item-right">
          <template slot="title">论文分类</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-submenu>
      </el-menu>
    </div>

    <!-- 展示数据开始 -->
    <el-table :data="tableData" class="box">
      <el-table-column prop="title" label="论文题目"> </el-table-column>
      <el-table-column label="文章内容">
        <template slot-scope="scope">
          <el-button @click="aa(scope.row.id)" size="medium" type="primary"
            >点击查看</el-button
          >
        </template>
      </el-table-column>
      <el-table-column prop="author" label="作者"> </el-table-column>
      <el-table-column prop="category" label="分类"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="110">
        <template slot-scope="scope" class="ff">
          <el-button type="danger" size="medium" @click="del(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 展示数据结束 -->

    <!-- 分页开始 -->
    <div class="tableDemo">
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-size="5"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 分页结束 -->
  </div>
</template>

<script>
import headers from "../components/Header.vue";
export default {
  components: {
    headers,
  },
  data() {
    return {
      total: 0,
      limit: {
        page: 1,
        pageSize: 5,
      },
      tableData: [{}],
    };
  },
  methods: {
    //删除文章
    del(id) {
      this.$http
        .get("/paper/del", {
          id: id,
        })
        .then((res) => {
          if (res.code == 0) {
            this.wode();
            this.totals();
            this.$notify({
              title: "提示",
              message: "删除成功",
              type: "success",
            });
          } else {
            this.$notify.error({
              title: "错误",
              message: "删除失败",
            });
          }
        });
    },
    //跳转首页
    sy() {
      this.$router.push({
        path: "/",
      });
    },
    //跳转到详细文章
    aa(f) {
      this.$router.push({
        name: "details_03",
      });
      localStorage.setItem("paper", f);
    },
    //获取我的文章
    wode() {
      this.$http
        .get("/paper/userList", {
          ...this.limit,
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data;
        });
    },
    //获取分页条数
    totals() {
      this.$http
        .get("/paper/userList", {
          page: 1,
          pageSize: 1000,
        })
        .then((res) => {
          this.total = res.data.length;
        });
    },
    //分页
    handleCurrentChange(currentPage) {
      this.limit.page = currentPage; //然后将当前页 = 改变的值
      this.wode();
    },
  },
  mounted() {
    this.wode();
    this.totals();
  },
};
</script>

<style lang="less" scoped>
.ff {
  border: 1px solid #000;
  border: none;
}
// 头部
.head {
  position: fixed;
  top: 0px;
  z-index: 999;
}
/* 导航 */
.navigation {
  width: 100%;
  overflow: hidden;
  margin-top: 30px;
}
/* logo */
.logo {
  float: left;
  margin: 0;
  padding: 0;
  // padding-right: 40px;
}
.logo img {
  cursor: pointer;
  width: 120px;
  height: 55px;
  padding-top: 15px;
  display: block;
}

.el-menu-demo {
  // height: 200px;
  float: left;
  width: 100%;
  padding-left: 190px;
  // position: absolute;
}
.el-menu-item-right {
  margin-left: 930px;
}

.box {
  width: 900px;
  margin: 0 auto;
  border: 1px solid #ebeef5;
  border-bottom: none;
  margin-top: 20px;
}
//分页
.tableDemo {
  // border: 1px solid saddlebrown;
  margin-top: 20px;
  margin-left: 250px;
  // border: 1px saddlebrown solid;
}
.search {
  width: 100%;
  display: flex;
  margin-bottom: 5px;
  // border: #000 1px solid;
  .el-button:nth-child(1) {
    margin-right: 900px;
  }
  .el-input {
    width: 280px;
  }
}
</style>